<template>
	<view class="login">
		<view class="header">
			<view :style="{paddingTop:statusBar+'px'}" class="title">
				<view class="titleImages" @click="titleImage()">
					<!-- <image src="../../static/service/back.png" mode=""></image> -->
				</view>
				<!-- <view :style="{lineHeight:navbar+'px'}" class="textNavigation">智慧膳食</view> -->
				<view class=""></view>
			</view>
			<view class="header_logon">用户登录</view>
			<view class="header_content">您好欢迎来到数学竞赛宝</view>
		</view>



		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<view class="centerForm" v-show="itemshow==1">
			<!-- 密码登录 -->

			<uni-forms ref="form1" :modelValue="userInfo" validate-trigger="bind">
				<uni-forms-item name="userName">
					<uni-easyinput v-model="userInfo.userName" placeholder="请填写用户名"
						@blur="binddata('account', $event.detail.value)" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput v-model="userInfo.password" placeholder="请输入密码" type="password"
						@blur="binddata('account', $event.detail.value)" />
				</uni-forms-item>
			</uni-forms>

		</view>
		<view class="define" @click="define('from1')" v-if="itemshow==1">登录</view>
		<!-- 立即注册和忘记密码 -->
		<view class="registerNowForgotPassword">
			<view class="registerNowForgotPassword_content" @click="toLogon()"> 尚未拥有账号？立即注册</view>
		</view>


		<!-- <toast v-if="toastShow" title="提示成功了" type="error"></toast> -->
		<u-toast ref="uToast" title="" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				psdEyes: true,
				itemshow: 1, //tab切换 默认值
				userInfo: {
					// password: "123456"
					// phone: "18734916797"
					userName: "",
					password: "",
				},

				navbar: 0, //状态栏高度
				statusBar: 0, // 状态栏高度 + 导航栏高度  
				customBar: 0, // 自定义标题与胶囊对齐高度
				roundCurrent: false, //点击阅读协议里边的圆点
				toastShow: false,
				rules: {
					// /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
					userName: {
						rules: [{
							required: true,
							errorMessage: '用户名不能为空',

						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let passwordReg =
									/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]{8,}$/;
								if (!passwordReg.test(value)) {
									callback('密码必须包含大小写字母、数字、特殊字符且至少8位')
								}
								return true
							}
						}]
					},
				},

			};
		},
		// mounted() {
		// 	this.$refs.centerFormTwo.setRules(this.rulesTwo);
		// },
		onReady() {
			// 表单设置校验规则
			this.$refs.form1.setRules(this.rules);

		},

		// created() {
		// 	const value = uni.getStorageSync('accessphone');
		// 	if (value) {
		// 		// console.log(value);
		// 		uni.switchTab({
		// 			url: '/pages/index/index'
		// 		});
		// 	}
		// },

		methods: {

			// 注册
			toLogon() {
				uni.navigateTo({
					url: '../../subpkg/logon/index',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			// 登录
			define() {
				// 表单验证
				this.$refs.form1.validate().then(res => {

					// 协议为选中的状态
					console.log("验证成功");
					// 	// console.log(11);
					// 代表是密码登录
					this.$http({
						url: "login",
						method: 'POST',
						data: this.userInfo
					}).then((res) => {
						console.log(res, "-------------++++----------");
						// uni.setStorageSync('accessToken', res.data.token);
						// const value = uni.getStorageSync('accessToken');
						// if (value) {

						if (res.code == 200) {
							console.log(1111);
							uni.showToast({
								title: '表单校验成功，正在登录请稍后',
								icon: 'none'
							});
							uni.setStorageSync('accessToken', res.data.token);
							uni.setStorageSync('userName', this.userInfo.userName);
							uni.setStorageSync('Id', res.data.id);
							uni.switchTab({
								url: '/pages/index/index'
							})
						}



						//  else {
						// 	uni.showToast({
						// 		title: res.msg || '系统异常,请稍后重试',
						// 		icon: 'none',
						// 		duration: 2000
						// 	});
						// }
						// }
						console.log(res, '++++++')
					})
					// .catch((err) => {
					// 	uni.showToast({
					// 		title: err.msg,
					// 		icon: 'none',
					// 		duration: 2000
					// 	});
					// })
				})

			},
		},
		mounted() {
			uni.getSystemInfo({
				success: (e) => {

					this.statusBar = e.statusBarHeight + 10
					const custom = uni.getMenuButtonBoundingClientRect()
					this.customBar = custom.bottom + custom.top - e.statusBarHeight
					this.navbar = (custom.top - e.statusBarHeight) * 2 + custom.height

				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		background: #fff;
		height: 100vh;
		width: 100%;




		// 头部
		.header {
			width: 100%;
			// height: 485rpx;
			background-image: url();
			background-size: 100% 100%;

			//注册
			.header_logon {
				text-align: center;
				width: 100%;
				height: 90rpx;
				font-size: 40rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 56rpx;
				// background: red;
				// padding-left: 58rpx;
				padding-top: 79rpx;
			}

			.header_content {
				text-align: center;
				// margin-top: -10rpx;
			}

		}




		// 表单部分
		.centerForm,
		.centerFormTwo {
			margin-top: 30rpx;
			padding: 24rpx 64rpx 0 64rpx;

			// 获取验证码的输入框
			/deep/ .uni-easyinput {
				position: relative;
				width: 622rpx;
				// height: 104rpx;
				background: #F2F2F2;
				border-radius: 24rpx;

			}

			// 输入框
			/deep/ .is-input-border {
				background: #F2F2F2;
				border-radius: 24rpx;
			}



			// 获取验证码
			.obtainVerificationCode {
				position: absolute;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #2370FC;
				line-height: 40rpx;
				top: 18rpx;
				right: 50rpx;
				z-index: 99;

				.obtainVerificationCode_text {
					margin-right: 6rpx;
				}
			}




		}

		//协议
		.agreement {
			width: 622rpx;
			display: flex;
			justify-content: center;
			margin-top: 28rpx;
			margin-left: 27rpx;

			.round {
				width: 24rpx;
				height: 24rpx;
				background: #FFFFFF;
				border: 2rpx solid #999999;
				border-radius: 50%;
				margin-right: 12rpx;
				margin-top: 5rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.mimi_round {
					width: 12rpx;
					height: 12rpx;
					margin-left: -1rpx;
					background: #2370FC;
					border-radius: 50%;
				}
			}

			.agreement_text {
				font-size: 24rpx;
				font-family: MicrosoftYaHei;
				line-height: 31rpx;

				.noBuldText {
					color: #999999;
				}

				.buldText {
					color: #333;
				}
			}
		}


		// 确定
		.define {
			margin: 0 auto;
			width: 622rpx;
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #2370FC;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(35, 112, 252, 0.33);
			border-radius: 24rpx;
			margin-top: 24rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 45rpx;
		}

		// 立即注册忘记密码
		.registerNowForgotPassword {
			width: 100%;
			height: 37rpx;
			text-align: center;
			margin-top: 40rpx;

			.registerNowForgotPassword_content {
				// position: absolute;
				font-size: 28rpx;
				font-family: MicrosoftYaHei;
				color: #999999;
				line-height: 37rpx;
			}
		}
	}
</style>